const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
      entry : {
            "index" : "./src/index/entry.js",
            "list"  : "./src/list/entry.js",
            "cart"  : "./src/cart/entry.js",
            "detail"  : "./src/detail/entry.js",
            "login"  : "./src/login/entry.js",
            "register" : "./src/register/entry.js",
            "repassword" : "./src/repassword/entry.js"
      },

      mode : "development",

      devtool : 'source-map',
  
      output : {
            path: path.resolve(__dirname, 'dist'),
            filename: 'javascripts/[name].js',

      },
       // 插件 , 放在 loader 的前面: 
       plugins : [
            new webpack.ProgressPlugin(),
            new MiniCssExtractPlugin(),
            new webpack.ProvidePlugin({
                  $ : "jquery",
                  axios : "axios",
            }),
            new HtmlWebpackPlugin( {
                  template : "./src/index/index.html",
                  inject : "body",
                  filename : "index.html",
                  chunks : ["index"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/list/list.html",
                  inject : "body",
                  filename : "list.html",
                  chunks : ["list"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/cart/cart.html",
                  inject : "body",
                  filename : "cart.html",
                  chunks : ["cart"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/login/login.html",
                  inject : "body",
                  filename : "login.html",
                  chunks : ["login"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/register/register.html",
                  inject : "body",
                  filename : "register.html",
                  chunks : ["register"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/detail/detail.html",
                  inject : "body",
                  filename : "detail.html",
                  chunks : ["detail"]
            } ),
            new HtmlWebpackPlugin( {
                  template : "./src/repassword/repassword.html",
                  inject : "body",
                  filename : "repassword.html",
                  chunks : ["repassword"]
            } )
      ],

      // loader配置 : 
      module : {
            rules : [
                  {
                        test : /\.css$/,  
                        use : [
                              MiniCssExtractPlugin.loader,
                              "css-loader"
                        ]
                  },
                  {
                        test : /\.s(c|a)ss$/,
                        use : [
                              MiniCssExtractPlugin.loader,
                              "css-loader",
                              "sass-loader"
                        ]
                  },
                  {
                        test : /\.html$/,
                        use : ["html-loader"]
                  },
                  {
                        test :  /\.(jpg|png|gif)$/,
                        loader :"url-loader",
                        options: {
                              limit: 1024 * 24,
                              name: 'images/[hash].[ext]',
                              esModule: false,
                         },
                         type: 'javascript/auto'
                  },
            ]
      },
     
      // 服务器配置 : 
      devServer: {
            host : "localhost",
            port: 9000,
            hot: true,
      },
}

